<template>
   <div class="btn_list">
    <!-- 渲染多个分类按钮 -->
        <div :class="{active:currentIndex==index}" @click="$emit('deliverIndex',index)" v-for="(item,index) in btnArr" :key="index">{{item}}</div>
   </div>
</template>

<script>
export default {
    // 通过props接收从父元素传来的值，改值是只读的(不能修改)
    // props:['btnArr'], //数组形式
    props:{ //对象形式，可以对传来的数据进行类型验证
        btnArr:{typeof:Array,default:[]},
        currentIndex:{type:Number,default:0}
    },
    data(){
        return{
            
        }
    },
    methods:{

    }
}
</script>

<style lang="scss" scoped>
    .btn_list{
        width: 25%;
        overflow: hidden;
        margin-top: 20px;
    }
    .btn_list div{
        width: 90%;
        height: 40px;
        line-height: 40px;
        margin: auto;
        text-align: center;
        background: white;
        margin-top: 10px;
    }
    .active{
        font-weight: bold;
    }
    
</style>

